<template>
  <a-spin :spinning="spinning">
    <a-button-group style="margin-bottom: 20px;">
      <a-button :icon="reverse ? 'sort-descending' : 'sort-ascending'" @click="handleClick">{{$t('m.common.label.sort')}}</a-button>
    </a-button-group>
    <a-timeline mode="left" :reverse="reverse">
      <a-timeline-item v-for="operateVo in data" :key="operateVo.id"
                       :color="operateVo.type == 'operation' ? 'red' : 'blue'">
        <p>{{operateVo.endTime}} {{operateVo.userName}}<span v-if="operateVo.deptName">/{{operateVo.deptName}}</span>
        </p>
        <p>{{operateVo.operationTypeString}} <span v-if="operateVo.message">：{{operateVo.message}}</span></p>
      </a-timeline-item>
    </a-timeline>
  </a-spin>
</template>

<script>

  import {getAction} from '@/api/manage';
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "BpmIdeaTime",
    props: {
      processInstanceId: {
        type: String,
        default: null
      },
      refreshFlg: {
        type: Number,
        default: 0
      }
    },
    components: {},
    data() {
      return {
        url: {
          getData: YchConstant.PREFIX_BPM + "/bpm-front/displayRest/getOperateListByInstanceId/v1"
        },
        data: [],
        spinning: false,
        reverse: false
      }
    },
    mounted() {
      this.refresh();
    },
    methods: {
      refresh() {
        if (!this.processInstanceId) {
          return;
        }
        const that = this;
        that.spinning = true;
        getAction(this.url.getData, {processInstanceId: this.processInstanceId}).then((res) => {
          if (res.success) {
            that.data = res.result;
          } else {
            that.messageUtil.warning(res.message);
          }
        }).finally(() => {
          that.spinning = false;
        });
      },
      handleClick() {
        this.reverse = !this.reverse;
      }
    },
    watch: {
      refreshFlg (value) {
        if (value > 1) {
          this.refresh()
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-timeline-item {
    padding: 0px 0px 1px 0px !important;
  }
</style>
